<template>
  <div>
    <el-date-picker
      v-model="daterangeVal"
      :start-placeholder="item.startPlaceholder || '开始日期'"
      :end-placeholder="item.endPlaceholder || '结束日期'"
      :type="item.dateType || 'daterange'"
      :default-time="item.defaultTime || daterangeDefaultTime"
      :value-format="'YYYY-MM-DD HH:mm:ss'"
      @change="daterangeChange"
    />
  </div>
</template>

<script setup lang="ts">
import { daterangeFromItem } from '@/types/wu-table'

const props = defineProps<{
  item: daterangeFromItem
  startVal: string | undefined
  endVal: string | undefined
}>()
const emits = defineEmits(['update:startVal', 'update:endVal'])
// 很烦,需指定元组类型
const daterangeDefaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59)
]
const daterangeVal = ref()

watch(
  () => daterangeVal.value,
  (val) => {
    console.log('外面===========', val)
    if (!val) {
      console.log('进来了呀===========', val)
      emits('update:startVal', undefined)
      emits('update:endVal', undefined)
    }
  },
  { deep: true }
)
const daterangeChange = (val: [string, string]) => {
  console.log('change val===', daterangeVal.value)

  emits('update:startVal', val?.[0])
  emits('update:endVal', val?.[1])
}
const clearInput = () => {
  daterangeVal.value = null
}
defineExpose({
  clearInput
})
</script>

<style lang="scss" scoped></style>
